<template>
    <div class="dateActivity">
        <scroll class="activity-text-wrapper" :dataObj="DetailList" v-show="DetailList.coverimg">
            <div>
            <!-- 场馆信息 -->
            <div class="banner">
                <img :src="DetailList.coverimg" alt="" />
            </div>
            <div class="banner-text">
                <p class="banner-title">{{DetailList.title}}</p>
                <p class="banner-address">地址：{{DetailList.address}}</p>
            </div>
            <split></split>
            <!-- 场馆详情 -->
            <div class="detail-wrapper">
                <div class="detail-title">
                    <i class="icon"></i>
                    <span class="text">活动详情</span>
                </div>
                <div class="detail-content" v-html="DetailList.content">
                </div>
            </div>
            <split></split>
            <div class="detail-btn" v-show="DetailList.hassubform === '1'">
                <router-link :to="'/activityNum/' + DetailList.id" tag="div" class="detail-btn-item">报名情况</router-link>
                <div class="detail-btn-item love-btn" v-text="DetailList.love===1 ? cancelLoveText : loveText" @click="handleClickLove(DetailList.love)"></div>
            </div>
            <div class="detail-btn-one" v-show="DetailList.hassubform != '1'">
                <div class="detail-btn-item love-btn" v-text="DetailList.love===1 ? cancelLoveText : loveText" @click="handleClickLove(DetailList.love)"></div>
            </div>
            </div>
        </scroll>
        <!-- 请求数据loading -->
        <div class="loading-wrapper" v-show="!DetailList.coverimg">
            <loading></loading>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import Vue from 'vue'
    import Loading from 'base/loading/loading'
    import Split from 'base/split/split'
    import Scroll from 'base/scroll/scroll'
    import { Toast } from 'vant'
    import { Dialog } from 'vant'

    export default {
        name: "date-activity",
        data () {
            return {
                DetailList: {},
                id: "001",
                loveText: "收藏",
                cancelLoveText: "取消收藏"
            }
        },
        methods: {
            // 收藏判断
            handleClickLove (type) {
                if (type === 0) {
                    axios.post('/api/index.php?g=Api&m=Ucenter&a=actshoucang ', {
                        openid: localStorage.getItem("openid"),
                        mid: localStorage.getItem("memberid"),
                        actid: this.$route.params.id
                    }).then((res) => {
                        if (res.data.rescode) {
                            Toast.success('收藏成功')
                            Vue.set(this.DetailList,'love',1)
                        } else {

                        }
                    }).catch(function (error) {
                        console.log(error)
                    })
                } else {
                    Dialog.confirm({
                        message: '确认取消收藏？'
                    }).then(() => {
                        axios.post('/api/index.php?g=Api&m=Ucenter&a=qxactshoucang ', {
                            openid: localStorage.getItem("openid"),
                            mid: localStorage.getItem("memberid"),
                            actid: this.$route.params.id
                        }).then((res) => {
                            console.log(res)
                            if (res.data.rescode) {
                                Toast.success('取消成功')
                                Vue.set(this.DetailList,'love',0)
                            } else {

                            }
                        }).catch(function (error) {
                            console.log(error)
                        })
                    }).catch(() => {
                        Dialog.close()
                    })
                }
            },
            getDetailInfo () {
                axios.post('/api/index.php?g=Api&m=Ucenter&a=activedetail', {
                    openid: localStorage.getItem("openid"),
                    mid: localStorage.getItem("memberid"),
                    actid: this.$route.params.id
                }).then((res) => {
                    if (res.data.rescode) {
                        // console.log(res.data.data)
                        this.$nextTick(() => {
                            this.DetailList = res.data.data
                        })
                    } else {

                    }
                }).catch(function (error) {
                    console.log(error)
                })
            }
        },
        components: {Loading,Split, Scroll},
        created () {
            this.id = this.$route.params.id
            this.getDetailInfo()
        }
    }
</script>

<style lang="stylus" scoped>
    @import '~common/stylus/mixins.styl'
    
    .dateActivity
        position: relative
        top: 0
        left: 0
        width: 100%
        height: 100%
        background: #fff
        box-sizing: border-box
        overflow: hidden
        touch-action: none
        .loading-wrapper
            position: absolute
            width: 100%
            top: 50%
            -webkit-transform: translateY(-50%)
            transform: translateY(-50%)
            z-index: 9
        .activity-text-wrapper
            width: 100%
            height: 100%
            position: absolute
            top: 0
            left: 0
            overflow: hidden
            .banner
                width: 100%
                height: 185px
                img
                    width: 100%
                    height: 100%
            .banner-text
                width: 100%
                height: 70px
                padding: 0 15px
                box-sizing: border-box
                overflow: hidden
                .banner-title
                    margin-top: 16px
                    width: 100%
                    ellipsis()
                .banner-address
                    font-size: 14px
                    color: #0094d4
                    margin-top: 10px
            .detail-wrapper
                width: 100%
                padding: 0 15px
                background: #fff
                box-sizing: border-box
                .detail-title
                    width: 100%
                    height: 40px
                    font-size: 0
                    border-bottom: 1px solid #eee
                    padding-top: 15px
                    box-sizing: border-box
                    .icon
                        background: url('./icon1.png') no-repeat
                        width: 15px
                        height: 10px
                        background-size: 100% 100%
                        display: inline-block
                        vertical-align: middle
                    .text
                        font-size: 16px
                        color: #0094d4
                        display: inline-block
                        vertical-align: middle
                        margin-left: 10px
                .detail-content
                    font-size: 14px
                    color: #888
                    line-height: 150%
                    padding: 15px 0
            .detail-btn,.detail-btn-one
                margin-top: 40px
                height: 38px
                font-size: 0
                padding-bottom: 40px
                .detail-btn-item
                    width: 40%
                    background: #0094d4
                    height: 38px
                    display: inline-block
                    font-size: 16px
                    margin-left: 7%
                    line-height: 38px
                    text-align: center
                    color: #fff
                    border-radius: 20px
                    &.love-btn
                        background: #f8624a
            .detail-btn-one
                width: 100%
                text-align: center
                .love-btn
                    width: 80%
                    margin-left: 0           
</style>